<div class="tab-wrap" id="productWrap">
    <#if isUnlocked == false>
        <div class="lock-tips">
            <div class="title">
                Below is a sample report. This feature only available to <em>PRO</em> version or higher.
                <br>
                Please use credit to unlock the report or upgrade your membership.
            </div>
            <div class="right">
                <button class="gd-btn btn-default">Unlock</button>
                <button class="gd-btn btn-info">Upgrade</button>
            </div>
        </div>
        <#if isMobile == false>
            <img class="demo-img" src="${request.contextPath}/static/img/ins/Brand-Product.png" alt="sample report">
        <#else>
            <img class="demo-img" src="${request.contextPath}/static/img/ins/Brand-Product-Mobile.png"
                 srcset="${request.contextPath}/static/img/ins/Brand-Product-Mobile@2x.png 2x" alt="sample report">
        </#if>
    <#else>
        <ul class="date-tab">
            <li class="date-tab-item" value="0">7 Days</li>
            <li class="date-tab-item" value="1">15 Days</li>
            <li class="date-tab-item is-active" value="2">30 Days</li>
        </ul>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Flagship Product Data
                <div class="gd-popover"
                     content="<dl class='modal-tip'>
                    <dt>1. Product</dt>
                    <dd>The number of tagged products in the selected period.</dd>
                    <dt>2. Post</dt>
                    <dd>The number of media posts tagged with a  product of the brand.</dd>
                    <dt>3. Views</dt>
                    <dd>The number of views on the video posts that tagged with a product of the brand.</dd>
                    <dt>4. Likes</dt>
                    <dd>The number of likes on the media posts that tagged with a product of the brand.</dd>
                    <dt>5. Reviews</dt>
                    <dd>The number of reviews on the media posts that tagged with a product of the brand.</dd>
                </dl>">
                    <i class="iconfont iconfaq"></i>
                </div>
            </div>
            <div class="wrap-item__inner">
                <div class="grid-data-list row-5 m-row-2" id="productBaseInfo">
                    <div class="grid-data-item">
                        <div class="title">
                            Product
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Post
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Views
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Likes
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Reviews
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap-item">
            <div class="wrap-item__title">Product Promoting Trend</div>
            <div class="wrap-item__inner">
                <div class="trend-wrap" id="promoteTrend"></div>
            </div>
        </div>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Flagship Product List
                <div class="gd-popover"
                     content="<dl class='modal-tip'>
                    <dt>1. Post</dt>
                    <dd>The number of media posts tagged with the product in last 30 days.</dd>
                    <dt>2. Engagements</dt>
                    <dd>The number of likes and reviews on the media posts tagged with the product in last 30 days.</dd>
                </dl>">
                    <i class="iconfont iconfaq"></i>
                </div>
            </div>
            <div class="wrap-item__inner">
                <div class="inner-header">
                    <div class="header__left">
                        <div class="gd-btn-select">
                            <ul class="btn-select" id="productBtnSelect">
                                <li class="btn-select-item is-active" value="0">All (0)</li>
                            </ul>
                        </div>
                    </div>
                    <div class="gd-select">
                        <div class="gd-select-title">
                            <div class="label">Primary Category</div>
                            <i class="iconfont icondown1"></i>
                        </div>
                        <div class="gd-select-wrap">
                            <ul id="productCategorySelect">
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="grid-list" id="productList">
                    <div class="grid-list__inner row-3"></div>
                    <div class="grid-list__footer">
                        <span>View More</span>
                    </div>
                </div>
            </div>
        </div>
    </#if>
</div>
<script src="${request.contextPath}/static/plugins/echarts.min.js"></script>
<script src="${request.contextPath}/static/js/nums.js"></script>
<script src="${request.contextPath}/static/js/dayjs.min.js"></script>
<script src="${request.contextPath}/static/js/time.js"></script>
<script type="module">
    import { getGridList, troggleActive, openDetail } from "/static/js/common.js"
    import { Select } from '/static/js/gd-ui/select/index.es.js'

    const productWrap = document.getElementById('productWrap')
    let dayType = 2
    const productParam = {
        brandId:'${brand.id?c}',
        dayType,
        page: 1,
        pageSize: 6,
    }

    <#if isUnlocked == true>
    initProduct()
    initEvent()
    </#if>

    function initProduct() {
        getProductStatis()
        getProductTrend()
        getProductCategory()
        getProduct()
    }
    function initEvent() {
        // 时间tab选择事件
        productWrap.querySelectorAll('.date-tab li').forEach(item => {
            item.addEventListener('click', () => {
                troggleActive(item, () => {
                    dayType = +item.getAttribute('value')
                    productParam.page = 1
                    initProduct()
                })
            })
        })

        productWrap.querySelector('.grid-list__footer span').addEventListener('click', () => {
            productParam.page ++
            getProduct()
        })
    }

    function getProductStatis() {
        const wrap = document.getElementById('productBaseInfo')
        wrap.showLoading()
        const url = getEncodeUrl('/ins/brand/product/media/st', {
            brandId:'${brand.id?c}',
            dayType
        })
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const statis = wrap.querySelectorAll('.sub-title')
                if(res.Data) {
                    statis[0].innerText = getNumber(res.Data.products)
                    statis[1].innerText = getNumber(res.Data.posts)
                    statis[2].innerText = getNumber(res.Data.views)
                    statis[3].innerText = getNumber(res.Data.likes)
                    statis[4].innerText = getNumber(res.Data.reviews)
                }
            }
            wrap.hideLoading()
        })
    }
    function getProductTrend() {
        const wrap = document.getElementById('promoteTrend')
        wrap.showLoading()
        const url = getEncodeUrl('/ins/brand/product/media/trend', {
            brandId:'${brand.id?c}',
            dayType
        })
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const data = res.Data
                if(data && data.length > 0) {
                    const chart = echarts.init(wrap)
                    const option = {
                        color: ['#8267F1', '#1FDBBE', '#1890FF'],
                        tooltip: {
                            <#if isMobile == true>
                            position: ['50%', 30],
                            </#if>
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        grid: {
                            <#if isMobile == true>
                            top: 40,
                            left: 50,
                            bottom: 25,
                            right: 50,
                            <#else>
                            top: 40,
                            left: 50,
                            bottom: 30,
                            right: 50,
                            </#if>
                        },
                        legend: {
                            data: ['Likes', 'Reviews', 'Posts'],
                            top: 10,
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: data.map(item => item.dateTime),
                                axisTick:{
                                    show:false,//不显示坐标轴刻度线
                                    lineStyle: {
                                        color: 'rgba(0,0,0,.45)' //刻度颜色
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(0,0,0,.45)'
                                    }
                                },
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel: {
                                    formatter: (val) => {
                                        return numFormat(val)
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(0,0,0,.45)',
                                        type: 'dashed' // 坐标轴虚线
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                                    },
                                }
                            },
                            {
                                type: 'value',
                                axisLabel: {
                                    formatter:  (val) => {
                                        return numFormat(val)
                                    }
                                },
                                axisLine: {
                                    lineStyle:{
                                        color: 'rgba(0,0,0,.45)',
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                                    },
                                }
                            }
                        ],
                        series: [
                            {
                                symbol: 'none',
                                name: 'Likes',
                                type: 'line',
                                data: data.map(item => item.likes)
                            },
                            {
                                symbol: 'none',
                                name: 'Reviews',
                                type: 'line',
                                data: data.map(item => item.reviews)
                            },
                            {
                                name: 'Posts',
                                type: 'bar',
                                yAxisIndex: 1,
                                <#if isMobile == false>
                                barWidth: 24,
                                <#else>
                                barWidth: 8,
                                </#if>
                                data: data.map(item => item.posts)
                            }
                        ]
                    }
                    chart.setOption(option)
                } else {
                    showNoDataImg(wrap, {
                        isECharts: true
                    })
                }
            }
            wrap.hideLoading()
        })
    }
    function getProductCategory() {
        const url = getEncodeUrl('/ins/brand/product/category', {
            brandId: '${brand.id?c}',
            dayType,
        })
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const btnSelectWrap = document.getElementById('productBtnSelect')
                const selectWrap = document.getElementById('productCategorySelect')
                let btnStr = '', str = ''
                res.Data && res.Data.forEach((item, i) => {
                    if(i === 0) {
                        str += '<li class="gd-option is-active">' + item.category + '</li>'
                        btnStr += '<li class="btn-select-item is-active">' + item.category + ' (' + item.count +')</li>'
                    } else {
                        str += '<li class="gd-option" value="' + item.category + '">' + item.category + '</li>'
                        btnStr += '<li class="btn-select-item" value="' + item.category + '">' + item.category + ' (' + item.count +')</li>'
                    }
                })
                btnSelectWrap.innerHTML = btnStr
                selectWrap.innerHTML = str

                productWrap.querySelectorAll('.gd-btn-select .btn-select-item').forEach(item => {
                    item.addEventListener('click', () => {
                        troggleActive(item, () => {
                            productParam.category = item.getAttribute('value')
                            productParam.page = 1
                            getProduct()
                        })
                    })
                })

                const select = new Select()
                select.setElement(productWrap.querySelectorAll('.gd-select'))
                select.setSelectedEvent(event => {
                    const element = event.target
                    productParam.category = element.getAttribute('value')
                    getProduct()
                })
                select.init()
            }
        })
    }
    function getProduct() {
        productParam.dayType = dayType
        const wrap = document.getElementById('productList')
        const inner = wrap.querySelector('.grid-list__inner')
        getGridList({
            loadingElement: wrap,
            url: '/ins/brand/product',
            params: productParam,
            listWrap: inner,
            footerElement: wrap.querySelector('.grid-list__footer'),
            listDomFunc: item => {
                let str = ''
                str += '<div class="grid-item">' +
                        '<a href="/instagram/product/' + item.productId + '">' +
                        '<div class="product-item">' +
                        '<div class="product-cover">' +
                            '<img src="' + getImage(item.image, IMAGE_TYPE.PRODUCT, IMAGE_SIZE.MIDDLE) + '" alt="product image">' +
                        '</div>' +
                        '<div class="product-info">'
                if(item.category) {
                    str += '<div class="category">' + item.category + '</div>'
                }
                str += '<div class="title">' + item.productName + '</div>' +
                            '<div class="sub-title">' + item.price + '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="data-list">' +
                        '<div class="data-item">' +
                        '<div class="title">Post</div>' +
                        '<div class="sub-title">' + numFormat(item.posts) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="title">Engagements</div>' +
                        '<div class="sub-title">' + numFormat(item.engagements) + '</div>' +
                        '</div>' +
                        '</div>' +
                        '</a>' +
                        '<div class="bottom" data-id="' + item.productId + '">' +
                            '<span>View Media List</span>' +
                        '</div>' +
                        '</div>'
                return str
            },
            otherEvent: () => {
                productWrap.querySelectorAll('.grid-item .bottom span').forEach(item => {
                    item.addEventListener('click', () => {
                        const productId = item.parentElement.getAttribute('data-id')

                        Object.assign(mediaListParam, {
                            page: 1,
                            dayType,
                            productId: productId
                        })

                        getMediaList()
                    })
                })
            }
        })
    }

    const mediaListParam = {
        page: 1,
        pageSize: 9,
        mediaType: 0,
    }
    function getMediaList() {
        showLoading()

        const url = getEncodeUrl('/ins/product/rel/media/new', mediaListParam)
        _axios.get(url).then(res => {
            hideLoading()
            if(res.Code === 200) {
                let str = '<div class="title">Media List</div>' +
                        '<div class="grid-list">' +
                        '<div class="grid-list__inner row-3">'
                res.Data.list.forEach(item => {
                    str += '<div class="grid-item" data-id="' + item.id + '" data-shortcode="'+ item.shortcode +'">' +
                            '<div class="cover">' +
                                '<img src="' + item.displayUrl + '" alt="FC Barcelona">'
                    switch (item.mediaType){
                        case 1:
                            str += '<i class="iconfont iconMultiPhoto-16px"></i>'
                            break
                        case 2:
                            str += '<i class="iconfont iconinsvideo-16px"></i>'
                            break
                        case 3:
                            str += '<i class="iconfont iconigtv"></i>'
                            break
                        case 4:
                            str += '<i class="iconfont iconinstagram-reels"></i>'
                            break
                    }
                    str += '<div class="bottom">' +
                                '<div class="left">' +
                                    '<i class="iconfont iconhuo"></i>' +
                                    '<span>' + numFormat(item.score) + '</span>' +
                                '</div>'
                    if (item.isSponsored) {
                        str += '<div class="right">Sponsored</div>'
                    }
                    str += '</div>' + '</div>'
                    str += '<div class="data-list">' +
                                '<div class="data-item">' +
                                    '<div class="title">Reviews</div>' +
                                    '<div class="sub-title">' + numFormat(+item.commentCount) + '</div>' +
                                '</div>' +
                                '<div class="data-item">' +
                                    '<div class="title">Likes</div>' +
                                    '<div class="sub-title">' + numFormat(+item.likeCount) + '</div>' +
                                '</div>' +
                                '<div class="data-item">' +
                                    '<div class="title">ER</div>' +
                                    '<div class="sub-title">' + numFormat(+item.er * 100) + '%</div>' +
                                '</div>' +
                            '</div>' +
                            '</div>'
                })
                str += '</div>' +
                        '<div class="grid-list__footer">' +
                        '<span>View More</span>' +
                        '</div>' +
                        '</div>'
                showModal({
                    position: {
                        top: 100
                    },
                    class: 'product-media-modal',
                    isShowConfirmBtn: false,
                    isShowCancelBtn: false,
                    content: str
                })

                if (gugeeOS.isIPhone) {
                    const inner = document.querySelector('.product-media-modal .grid-list__inner')
                    inner.style.marginBottom = '160px'
                }
                const list = document.querySelectorAll('.product-media-modal .grid-item')
                list.forEach(item => {
                    item.addEventListener('click', () => {
                        const id = item.getAttribute('data-id')
                        const shortcode = item.getAttribute('data-shortcode')
                        openDetail(id,shortcode)
                    })
                })

                // view More 事件
                const footer = document.querySelector('.product-media-modal .grid-list__footer')
                if(res.Data.lastPage) {
                    footer.hide()
                }
                footer.addEventListener('click', () => {
                    mediaListParam.page ++
                    getMoreMediaList()
                })
            }
        })
    }

    function getMoreMediaList() {
        const wrap = document.querySelector('.product-media-modal .grid-list')
        const footer = wrap.querySelector('.grid-list__footer')
        getGridList({
            loadingElement: wrap,
            url: '/ins/product/rel/media/new',
            params: mediaListParam,
            listWrap: wrap.querySelector('.grid-list__inner'),
            footerElement: footer,
            listDomFunc: item => {
                let str = ''
                str += '<div class="grid-item" data-id="' + item.id + '" data-shortcode="'+ item.shortcode +'">' +
                        '<div class="cover">' +
                        '<img src="' + item.displayUrl + '" alt="FC Barcelona">'
                switch (item.mediaType){
                    case 1:
                        str += '<i class="iconfont iconMultiPhoto-16px"></i>'
                        break
                    case 2:
                        str += '<i class="iconfont iconinsvideo-16px"></i>'
                        break
                    case 3:
                        str += '<i class="iconfont iconigtv"></i>'
                        break
                    case 4:
                        str += '<i class="iconfont iconinstagram-reels"></i>'
                        break
                }
                str += '<div class="bottom">' +
                        '<div class="left">' +
                        '<i class="iconfont iconhuo"></i>' +
                        '<span>' + numFormat(item.score) + '</span>' +
                        '</div>'
                if (item.isSponsored) {
                    str += '<div class="right">Sponsored</div>'
                }
                str += '</div>' + '</div>'
                str += '<div class="data-list">' +
                        '<div class="data-item">' +
                        '<div class="title">Reviews</div>' +
                        '<div class="sub-title">' + numFormat(+item.commentCount) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="title">Likes</div>' +
                        '<div class="sub-title">' + numFormat(+item.likeCount) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="title">ER</div>' +
                        '<div class="sub-title">' + numFormat(+item.er * 100) + '%</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                return str
            },
            otherEvent: () => {
                mediaListParam.page ++

                const list = document.querySelectorAll('.product-media-modal .brand-post-item')
                list.forEach(item => {
                    item.addEventListener('click', () => {
                        const id = item.getAttribute('data-id')
                        const shortcode = item.getAttribute('data-shortcode')
                        openDetail(id,shortcode)
                    })
                })
            }
        })
    }
</script>